<template>
	<view class="header">
		<!-- 头部-默认显示 -->
		<view class="before">
			<view class="back">
				<view class="icon iconfont" @tap="back" v-if="showBack">&#xe679;</view>
			</view>
			<view class="middle"></view>
			<view class="icon-btn">
				<view @tap="showCart" class="icon iconfont">&#xe6af;</view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//是否显示返回按钮
			    // #ifndef MP
			    showBack:true,
 			    // #endif
			}
		},
		onLoad(){
			// #ifdef MP
			//小程序隐藏返回按钮
			this.showBack = false
			// #endif
		},
		methods:{
			//返回上一页
			back() {
				uni.navigateBack();
			},
			showCart() {
				uni.switchTab({
					url: "../tabBar/cart/cart"
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		height: 100rpx;
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		z-index: 10;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		
		.before {
			width: 92%;
			height: 100rpx;
			padding: 0 4%;
			position: fixed;
			top: 0;
			display: flex;
			align-items: center;
			transition: opacity 0.05s linear;
			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */
			
			.back {
				width: 125rpx;
				height: 60rpx;
				flex-shrink: 0;
				
				.icon {
					width: 60rpx;
					height: 60rpx;
					margin-left: -10%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 42rpx;
				}
			}
			
			.middle {
				width: 100%;
			}
			
			.icon-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				flex-shrink: 0;
			
				.icon {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 42rpx;
				}
			}
		}
		
	}
</style>
